<template>
    <div class="container">
         <div class="products" >
          <div  class="product" :key="pro" v-for="pro in pros">
            <!--点击图片传出参数-->
            <img :src="pro.pimg" height="200px" width="200px" @click="gtproinfo(pro.pid,pro.pname)"/>
            <br />
            <p>姓名：{{ pro.pname }}</p>
            </div>
        </div>
    </div>

</template>
<script>
export default {
    data(){
        return{
            pros: [
        {
          tp_id: 1,
          pid: 10011,
          pname: "name1",
          price: 1000,
          pimg: "../../static/p1.jpg",
        },
        {
          tp_id: 2,
          pid: 10022,
          pname: "name2",
          price: 2000,
          pimg: "../../static/p2.jpg",
        },
        {
          tp_id: 3,
          pid: 10033,
          pname: "name3",
          price: 3000,
          pimg: "../../static/p3.jpg",
        },
        {
          tp_id: 4,
          pid: 10044,
          pname: "name4",
          price: 4000,
          pimg: "../../static/p4.jpg",
        }
      ],
        }
    },
    methods:{
    gtproinfo(pid,pname){
      this.$router.push("/details/"+pid+'/'+pname)
    }
  }
};
</script>
<style scoped>
.container{
    background: rgba(245,245,245,1);
}
.products{
   display: flex;
   margin: 0px 20px 0px 20px;
   flex-wrap: wrap;
   justify-content: space-around;
   
}
.product {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 5px;
  margin-left: 5px;
  padding: 20px 20px 5px 20px;
  border:#333 ;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background: rgb(255, 255, 255);
}
</style>